<nz-page-header nzTitle="swiper">
    <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>
            <a [routerLink]="['/']">首页</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
            <a [routerLink]="['/mall']"> {{'mall'|translate}}</a>
        </nz-breadcrumb-item>
    </nz-breadcrumb>
</nz-page-header>

<nz-card [nzExtra]="extraAction">
    <ng-template #extraAction>
        <button nz-button nzSize="large" class="mr-4" (click)="create()" nzType="primary">{{'add' | translate}}</button>
        <button nz-button nzSize="large" (click)="refresh()">{{'refresh' | translate}}</button>
    </ng-template>
    <nz-table #dataTable nzShowSizeChanger nzShowPagination [nzFrontPagination]="false" [nzData]="dataItems" [nzTotal]="pageingInfo.totalItems"
        [(nzPageSize)]="pageingInfo.pageSize" [(nzPageIndex)]="pageingInfo.pageNumber" [nzLoading]="pageingInfo.isTableLoading" (nzPageIndexChange)="refresh()"
        (nzPageSizeChange)="refresh()">
        <thead>
            <tr>
                <th width="100px">app</th>
                <th width="270px">封面</th>
                <th>分组名称</th>
                <th>介绍</th>
                <th>排序</th>
                <th>跳转</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of dataTable.data">
                <td>
                    <nz-tag [nzColor]="getRndColor(item.appName)"> {{item.appName | translate}}</nz-tag>
                </td>
                <td>
                    <img [src]="item.coverImageUrl" style="width:256px;height:128px;" />
                </td>

                <td>{{item.groupName}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sort}}</td>
                <td>{{item.redirectUrl}}</td>
                <td>
                    <button nz-button nzType="primary" nzShape="circle" (click)="edit(item)">
                        <i nz-icon nzType="edit"></i>
                    </button>
                    <nz-divider nzType=" vertical"></nz-divider>
                    <button nz-button nzType="danger" nzShape="circle" nz-popconfirm [nzPopconfirmTitle]="'确定删除吗?'" (nzOnConfirm)="delete(item)"
                        nzPopconfirmPlacement="top"><i nz-icon nzType="delete"></i></button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>